<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝旭报名表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    .all {
      width:600px;
      height:1000px;
      border:2px solid rgb(199, 199, 199);
      background-color: rgb(242, 242, 242);
      box-shadow: 8px 8px 8px #282828;
      padding: 10px;
      margin: 0 auto;
    }
    .container {
      position: relative;
      display: flex;
      display: space-between;
      align-items: center;
      margin: 5px;
      border:none; 
    } 
    .one {
        display: block;
        margin:0 auto;
    }
    .xing {
      float: left;
      background-color: rgb(248, 248, 249);
      height: 23px;
      width: 24.333px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      padding: 4px 7px;
      border:1px solid  rgb(220, 222, 226);
      border-right: none;
      border-radius: 4px 0 0 4px;
    }
   .input0 {
    margin: 0 auto;
   }
    .input {
      float: left;
      width: 540px;
      height: 30px;
      border:1px solid  rgb(220, 222, 226);
      font-size: 12px;
      border-radius: 0 4px 4px 0;
    }
    .input,
    .input2,
    .input1:focus {
      outline-color: rgb(54, 87, 152);
    }
    .input1 {
        float: left;
      width: 582.333px;
      height: 33px;
      border:1px solid  rgb(220, 222, 226);
      font-size: 12px;
      border-radius: 4px;
      margin:5px;
    }
    .input2 {
        float: left;
      width: 582.333px;
      height:100px;
      border-radius: 4px;
      border:1px solid  rgb(220, 222, 226);
      font-size: 12px;
      margin: 5px;
    }
    .submit {
      background-color:rgb(62, 62, 159);
      color:aliceblue;
      display: inline-block;
      margin: 5px auto;
    }
    </style>
</head>
<body>
  <div class="all">
    <form>
        <input type="image" value="照片" class="one"></br>
        <input type="file" value="选择文件" class="one"></br>
         <div class="container"> 
           <div class="xing"><p>姓名</p></div><input type="text" placeholder="输入姓名" class="input">
        </div>
        <div class="container"> 
           <div class="xing"><p>学号</p></div><input type="text" placeholder="输入学号" class="input">
        </div>
        <div class="container"> 
           <div class="xing"><p>手机</p></div><input type="text" placeholder="输入手机号(用于即时公示面试结果)" class="input">
        </div>
        <div class="container"> 
           <div class="xing"><p>QQ</p></div><input type="text" placeholder="输入QQ号码" class="input">
        </div>
        <div class="container"> 
           <div class="xing"><p>邮箱</p></div><input type="text" placeholder="输入QQ邮箱" class="input">
        </div>
        <div class="container"> 
           <div class="xing"><p>寝室</p></div><input type="text" placeholder="用于即时发送物件" class="input">
        </div>
        <div class="container"> 
           <div class="xing"><p>昵称</p></div><input type="text" placeholder="请输入昵称" class="input">
        </div>
    <hr/ width="99%" >
    <br/>
        <input type="radio" name="sex" checked="checked" id="nan"><label for="nan">男</label><input type="radio" name="sex" id="nv"><label for="nv">女</label></br>
        <select  class="input1">
          <option selected hidden disabled value="tishi">选择专业</option>
            <option>计算机类</option>
            <option>教育技术学(公费师范类)</option>
            <option>计算机科学与技术(中外合作)</option>
            <option>传媒</option>
            <option>其它</option>
        </select></br>
        <select placeholder="选择年级" class="input1">
          <option selected hidden disabled value="tishi">选择要面试的岗位</option>
            <option>2017级</option>
            <option>2018级</option>
            <option>2019级</option>
            <option>2020级</option>
            <option>2021级</option>
            <option>2022级</option>
            <option>2023级</option>
        </select></br>
        <select class="input1">
          <option selected hidden disabled value="tishi">选择要面试的岗位</option>
            <option>前端</option>
            <option>后端</option>
        </select></br>
        <select class="input1">
             <option selected hidden disabled value="tishi">选择你的年龄</font></option>
            <option>14周岁</option>
            <option>15周岁</option>
            <option>16周岁</option>
            <option>17周岁</option>
            <option>18周岁</option>
            <option>19周岁</option>
            <option>20后端</option>
        </select></br>
        <hr/ width="99%">
        <br>
          <font size="0.9px">个人简介</font><br/>
          <textarea placeholder="提示：可以讲一个人生中的重要时刻~"  class="input2" style="resize:none"></textarea><br/>
          <font size="0.9px">掌握技能</font><br/>
          <textarea autofocus placeholder="写专业技能哦~"  class="input2"  style="resize:none"></textarea><br/>
          <center><input type="submit" value="提交" class="submit" ></center>
        </form>
      </div>
</body>
</html>